<template>
  <div class="gather-container">

    <!-- <div class="table-list"> -->
      <el-table class="table-list" v-loading="loading" :data="deviceList">
        <el-table-column label="序号" width="70" type="index" align="center" />
        <el-table-column label="设备名称" align="center" prop="equipName" />
        <el-table-column label="设备IP" align="center" prop="equipIp" />
        <el-table-column label="操作系统" align="center" prop="equipOs" />
        <el-table-column label="系统架构" align="center" prop="osVersion" />
        <el-table-column label="开机时间" align="center" prop="equipStartTime" />
        <el-table-column label="开机时长" align="center" prop="equipUseTimes" />
        <el-table-column label="内存总量" align="center" prop="memTotal">
          <template #default="scope">
            <span>{{ scope.row.memTotal }}G</span>
          </template>
        </el-table-column>
        <el-table-column label="内存使用量" align="center">
          <template #default="scope">
            <el-button v-if="showMemRed(scope.row)===1" link type="success">{{ scope.row.memPercent }}%</el-button>
            <el-button v-else-if="showMemRed(scope.row)===2" link type="warning">{{ scope.row.memPercent }}%</el-button>
            <el-button v-else link type="danger">{{ scope.row.memPercent }}%</el-button>
          </template>
        </el-table-column>
        <el-table-column label="磁盘总量" align="center" prop="diskTotal">
          <template #default="scope">
            <span>{{ scope.row.diskTotal }}G</span>
          </template>
        </el-table-column>
        <el-table-column label="磁盘使用率" align="center">
          <template #default="scope">
            <el-button v-if="showdiskRed(scope.row)===1" link type="success">{{ scope.row.diskPercent }}%</el-button>
            <el-button v-else-if="showdiskRed(scope.row)===2" link type="warning">{{ scope.row.diskPercent }}%</el-button>
            <el-button v-else link type="danger">{{ scope.row.diskPercent }}%</el-button>
          </template>
        </el-table-column>
        <el-table-column label="CPU核心数" align="center" prop="cpuTotal" />
        <el-table-column label="CPU使用率" align="center">
          <template #default="scope">
            <el-button v-if="showcpuRed(scope.row)===1" link type="success">{{ scope.row.cpuPercent }}%</el-button>
            <el-button v-else-if="showcpuRed(scope.row)===2" link type="warning">{{ scope.row.cpuPercent }}%</el-button>
            <el-button v-else link type="danger">{{ scope.row.cpuPercent }}%</el-button>
          </template>
        </el-table-column>
      </el-table>
    <!-- </div> -->
    <div class="pagination-view">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
    </div>
    
  </div>
</template>

<script setup name="Device">
import { ref } from "vue";
import { gatherList } from '@/api/system/deviceGather.js'
const deviceList = ref([]);
const loading = ref(true);
const total = ref(0);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
  }
});
const showdiskRed = (item) => {
  if (Number(item.diskPercent) && Number(item.diskPercent) !== NaN && Number(item.diskPercent) < 70) {
    return 1
  }else if ((Number(item.diskPercent) && Number(item.diskPercent) !== NaN && Number(item.diskPercent) >= 70)&& Number(item.diskPercent) <= 100){
    return 2
  }
  return 0
}
const showcpuRed = (item) => {
  if (Number(item.cpuPercent) && Number(item.cpuPercent) !== NaN && Number(item.cpuPercent) < 70) {
    return 1
  }else if ((Number(item.cpuPercent) && Number(item.cpuPercent) !== NaN && Number(item.cpuPercent) >= 70)&& Number(item.cpuPercent) <= 100){
    return 2
  }
  return 0
}
const showMemRed = (item) => {
  if (Number(item.memPercent) && Number(item.memPercent) !== NaN && Number(item.memPercent) < 70) {
    return 1
  }else if ((Number(item.memPercent) && Number(item.memPercent) !== NaN && Number(item.memPercent) >= 70)&& Number(item.memPercent) <= 100){
    return 2
  }
  return 0
}
const { queryParams, form, rules } = toRefs(data);
/** 查询设备维护列表 */
function getList() {
  loading.value = true;
  gatherList(queryParams.value).then(response => {
    deviceList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
getList();
</script>
<style lang="scss" scoped>
.gather-container {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .table-list {
    flex: 1;
  }
  .pagination-view{
    margin-right: 25px;
    height: 80px;
  }
}
</style>
